<div class="panel panel-default">
    <div class="panel-heading clickable" data-toggle="collapse" data-target="#J_Setting_Meta">
        <h4 class="panel-title" data-bind="text: Kooboo.text.component.pageEditor.htmlMeta"></h4>
    </div>
    <div id="J_Setting_Meta" class="panel-collapse collapse">
        <ul data-bind="foreach: metaList" class="list-group">
            <!-- ko if: $index() == 0 -->
            <li class="list-group-item">
                <strong>Current page</strong>
            </li>
            <!-- /ko -->
            <li class="list-group-item">
                <a data-bind="tooltip:Kooboo.text.common.remove, click: $parent.remove" href="javascript:;" class="btn gray btn-xs pull-right margin-right-5">
                    <i class="fa fa-minus"></i>
                </a>
                <a data-bind="tooltip:Kooboo.text.common.edit, click: $parent.edit" href="javascript:;" class="btn blue btn-xs pull-right">
                    <i class="fa fa-pencil"></i>
                </a>
                <span data-bind="text: $data.displayText" class="nowrap-text"></span>
            </li>
        </ul>
        <div class="panel-body">
            <button data-bind="click: createMeta" class="btn blue btn-xs pull-right">
                <i class="fa fa-plus"></i>
            </button>
        </div>
    </div>
</div>